import {memo,useEffect,useMemo,useState} from 'react'
import  './PopBox.less'

function PopList({
    popClassName,
    tabList,
    activedId,
    changeSelectId
}:any){
    return (
        <ul  className={popClassName+ ' ' + 'defaultPop'}>
            {
                tabList.map(item=>{
                    return(
                        <li key={item.id} 
                            onClick={()=>changeSelectId(item.id)} 
                            className={activedId == item.id ? 'activated' : ''}
                        >
                            {item.label}
                        </li>
                    )
                })
            }
        </ul>
    )
}

export default  memo(function PopBox({
    title,
    tabList,
    titleClassName,
    popClassName,
    activedId,
    changeSelectId,
}:any){
    const [showList,setShowList] = useState(false)
    useEffect(()=>{
        if(tabList?.length==0 || !tabList){
            setShowList(false)
        }
    },[tabList])

    return (
        <div style={{position:'relative'}} 
            onClick={()=>setShowList(pre=>!pre)} 
            className={titleClassName+ ' defaultTitle'}
        >
            {title}
            {showList  && <PopList 
                            popClassName={popClassName} 
                            tabList={tabList} 
                            activedId={activedId} 
                            changeSelectId={changeSelectId}
                          />}
        </div>
    )
}) 